<template>
  <uni-nav-bar title="积分明细" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <view class="money">3569</view>
  <view class="datas">
    <uni-datetime-picker v-model="range" type="daterange" :border="false" :clear-icon="false" rangeSeparator="至"
      @change="change" />
  </view>
  <view class="package" style="padding:0px;">
    <view class="space-between" style="border-bottom:1px solid #eee;padding:20rpx 30rpx 10rpx;box-sizing: border-box;">
      <view class="column list" v-for="(item,index) in list" :key="item.name" @click="()=>current=index">
        <view :style="{color:current===index?'#333':'#666'}">{{item.name}}</view>
        <view :style="{background:current===index?'#1B91FF':'#fff'}"></view>
      </view>
    </view>
    <view class="space-between record" v-for="item in 6">
      <view class="direction-start">
        <view>积分兑换</view>
        <view style="color:#666;margin-top:8rpx;font-size: 28rpx;">2023-01-21 15:12:12</view>
      </view>
      <view>3569</view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { navBack, navTo } from '@/utils/navigator';
  import { ref } from 'vue';
  import { format, subDays } from 'date-fns';
  // data
  const now = new Date();
  let end = format(now, 'yyyy-MM-dd');
  const daysAgo = subDays(now, 6);
  let start = format(daysAgo, 'yyyy-MM-dd');
  const range = ref([start, end]);

  const list = [{ name: '全部' }, { name: '加注订单' }, { name: '积分订单' }]
  const current = ref(0)

  function change([sta, en]) {
    start = sta;
    end = en;
  }
</script>

<style scoped lang="less">
  .money {
    padding: 20rpx;
    box-sizing: border-box;
    font-size: 78rpx;
    color: #1B91FF;
  }

  .list {
    color: #666;

    view:nth-of-type(2) {
      width: 67rpx;
      height: 8rpx;
      margin-top: 10rpx;
      border-radius: 5px;
    }
  }
  .record:nth-last-child(1){
    border-bottom: 0px;
  }
  .record{
    padding:20rpx;
    box-sizing: border-box;
    border-bottom:1px solid #eee;
  }
</style>
<style>
  .datas>>>.uni-date__x-input {
    font-size: 30rpx !important;
  }

  .datas>>>.uni-date-x {
    font-size: 30rpx !important;
  }

  .datas>>>.uni-icons {
    font-size: 48rpx !important;
  }

  .datas>>>.uni-date-x {
    background: transparent;
  }
</style>